<template>
    <div class="com_box flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <div class="strategy_head flexbox flexcenter flexbetween">
            <span class="font_16 color_01">项目奖金汇总列表</span>
            <div class="flexbox flexcenter">
                <el-input placeholder="请输入项目名称搜索" size="small" style="width:180px;margin-right:12px" clearable prefix-icon="el-icon-search" v-model="queryInfo.project_name" @change="getDataList()">
                </el-input>
                <span class="font_14 color_01">收款日期</span>
                <el-date-picker style="width:220px;margin:0 12px" value-format="yyyy-MM-dd" v-model="queryInfo.getmoney_date" type="daterange" clearable size="small" @change="getDataList()" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
                <span class="font_14 color_01">追投日期</span>
                <el-date-picker style="width:220px;margin:0 12px" value-format="yyyy-MM-dd" v-model="queryInfo.zt_date" type="daterange" clearable size="small" @change="getDataList()" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </div>
        </div>
        <div class="flex over_box table_box">
            <el-table :data="tableData" class="com_table" ref="straRef" height="100%">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:700px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column prop="nickname" label="用户名称"></el-table-column>
                <el-table-column prop="media_worker" label="媒介角色占比"></el-table-column>
                <el-table-column prop="media_worker_bonus" label="媒介角色奖金"></el-table-column>
                <el-table-column prop="content_worker" label="内容角色占比"></el-table-column>
                <el-table-column prop="content_worker_bonus" label="内容角色奖金"></el-table-column>
                <el-table-column prop="project_manager" label="项目经理角色占比"></el-table-column>
                <el-table-column prop="project_manager_bonus" label="项目经理角色奖金"></el-table-column>
                <el-table-column prop="total_bonus" label="项目奖金"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            tableData: [],
            queryInfo: {
                project_name: "",
                getmoney_date: [],
                zt_date: [],
            },
        };
    },
    created() {
        this.queryInfo.project_name = this.$route.query.project_name;
        this.queryInfo.getmoney_date = this.$route.query.getmoney_date;
        this.queryInfo.zt_date = this.$route.query.zt_date;
        this.getDataList(1);
    },
    methods: {
        //获取列表
        async getDataList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "fxdata/revenue/projectBonus",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.bonus;
            }
        },
    },
    components: {},
};
</script>


<style scoped>
.strategy_head {
    height: auto;
    margin-top: 20px;
}
</style>


